<template>
  <div id="app">
    <header class="headers" :class="{home: $route.path == '/'}">
      <div class="left" v-if="$route.path != '/'">
        <div class="return-icon" @click="$router.push('/')"></div>
      </div>
      <div class="center">
        <div v-if="$route.path != '/'">
          分币
        </div>
      </div>
      <div class="left right">
        <div v-show="!token.access_token">
          <span @click="route('/login')">登录</span> /
          <span @click="route('/register')">注册</span>
        </div>
      </div>
    </header>
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App',
  data () {
    return {}
  },
  methods: {
    route (r) {
      this.$router.push(r)
    }
  },
  computed: {
    token () {
      return this.$store.state.token
    }
  },
  created () {
    if (!this.token.access_token) {
      let token = JSON.parse(window.localStorage.getItem('LOCALTOKEN') || '{ "access_token": "" }')
      if (token.access_token) {
        this.$store.commit('INIT', token)
      }
    }
  }
}
</script>

<style lang="scss">
@import './assets/scss/variable.scss';
#app {
  position: absolute;
  left: 0;
  width: 100%;
  top: 0;
  height: 100%;
  overflow: auto;
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #fff;
  background: $theme;

  .headers {
    display: flex;
    height: 46px;
    line-height: 46px;
    background: #3b3b3b;
    color: #fff;

    &.home {
      background: transparent;
    }

    > .left {
      width: 80px;
      font-size: 12px;
      text-align: center;
    }

    > .center {
      flex-grow: 1;
      text-align: center;
    }

    .return-icon {
      height: 100%;
      background: url(./assets/images/return.png) no-repeat 10px center;
      background-size: 20px;
    }
  }
}
</style>
